<template>
  <div>
    <div class="tabs">
      <span 
        v-for="(item,index) in tabArr" 
        v-bind:class="actIdx==index?'active':''"
        v-on:click="handleTab(index)"
      >
        {{item.name}}
      </span>
    </div>
    <div class="cont" v-for="(item,index) in tabArr" v-show="actIdx==index">
      {{item.content}}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabArr:[ //1. 定数据
          {name:'吃饭',content:'吃什么？'},
          {name:'睡觉',content:'睡多久？'},
          {name:'打豆豆',content:'怎么打？'},
          {name:'打豆豆1',content:'怎么打1？'},
        ],
        actIdx:0
      };
    },
    methods:{
      handleTab(n){
        this.actIdx = n
      }
    }
  }
</script>

<style  scoped>
.tabs {
  margin: 50px;
}
.tabs span {
  padding: 20px;
  background-color: #d8d8d8;
  margin: 10px;
}
.tabs span.active {
  background-color: orange;
  color: #fff;
}
.cont {
  height: 300px;
  width: 300px;
  border: 1px solid #333;
}
</style>